<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html xmlns:th="" lang="zh-CN">
<%@include file="/WEB-INF/pages/base/include.jsp"%>
<body>
<div id="wrapper">
    <%@include file="/WEB-INF/pages/base/menu.jsp"%>
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-header">粉丝管理</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">用户列表</div>
                    <div class="panel-body inner-body">
                        <div class="main-box-search">
                            <form method="post" name="from1" id="searchForm">
                                <div class="search-row">
                                    <input type="hidden" name="" value="">
                                    <div class="col-lg-2 col-md-6" style="margin-bottom:15px; padding-left:0px;">
                                        <input class="form-control" type="text" name="orderId" id="accountId"
                                               placeholder="请输入上级id查询">
                                    </div>
                                    <div class="col-lg-3 col-md-6" style=" margin-bottom:15px; padding-left:0px;">
                                        <input class="form-control" type="text" name="orderId" id="fansAccountId"
                                               placeholder="请输入粉丝id查询">
                                    </div>
                                    <div class="col-lg-3 col-md-6" style=" margin-bottom:15px; padding-left:0px;">
                                        <input class="form-control" type="text" name="orderId" id="fansNickname"
                                               placeholder="请输入粉丝昵称查询">
                                    </div>
                                    <div class="col-lg-3 col-md-6" style=" margin-bottom:15px; padding-left:0px;">
                                        <input class="form-control" type="text" name="orderId" id="level"
                                               placeholder="请输入粉丝级别查询">
                                    </div>
                                    <div class="col-lg-2 col-md-6" style=" margin-bottom:15px;">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="dataTable_wrapper">
                            <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                <thead>
                                <tr>
                                	<th class="text-center" style="width:6%;">上级用户id</th>
                                    <th class="text-center" style="width:6%;">上级用户昵称</th>
                                    <th class="text-center" style="width:4%;">上级用户头像</th>
                                    <th class="text-center" style="width:4%;">粉丝id</th>
                                    <th class="text-center" style="width:4%;">粉丝昵称</th>
                                    <th class="text-center" style="width:4%;">粉丝头像</th>
                                    <th class="text-center" style="width:4%;">粉丝级别</th>
                                    <th class="text-center" style="width:8%;">创建时间</th>
                                </tr>
                                </thead>
                                <tbody  id="userList">
                                </tbody>
                            </table>
                        </div>
                        <div class="text-right">
                            <ul class="pagination" id="pagination">
                                <li><a href="javascript:void(0);" onclick="" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
				                <li><a  href="javascript:void(0);" onclick="" >1</a></li>
				                <li><a href="javascript:void(0);" onclick=""  aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
	searchCase(0,1);
	$('#searchForm').change(function(e) {
		searchCase(1,1);
	})
	//搜索微商
	function searchCase(flag,page) {
		var pageSize= 10;
		
		var accountId = null;
		var fansAccountId = null;
		var fansNickname = null;
		var level = null;
		
		if(flag == 1){
			accountId = $("#accountId").val();
			fansAccountId = $("#fansAccountId").val();
			fansNickname = $("#fansNickname").val();
			level = $("#level").val();
		}
		
		var baseURL = "${webPath}/qqbsFans/list";
	    var json_package = {
	        "head": {},
	        "body": {
	        	"accountId": accountId,
	        	"fansAccountId": fansAccountId,
	        	"fansNickname": fansNickname,
	        	"level": level,
	            "page": page,
	            "pageSize": pageSize
	        }
	    }
	    $.post(baseURL, {"json_package": JSON.stringify(json_package)}, function (result) {
	        if (typeof result == 'string') result = JSON.parse(result);
	        if (result.body.result == '1') {
	            alert(result.body.description)
	            $("#userList").empty();
	        } else {
	        	$("#userList").empty();
	        	var list = result.body.list;
	        	var count = result.body.count;
	        	var str = "";
	        	if(list.length<=0){
	        		return
	        	}
	        	for(var i=0;i<list.length;i++){
	        		str += '<tr>';
	        		str += '	<td class="text-center">'+list[i].accountId+'</td>';
	        		str += '	<td class="text-center">'+list[i].nickname+'</td>';
	        		str += '	<td class="text-center"><img src="'+list[i].image+'" width="30px"></td>';
	        		str += '	<td class="text-center">'+list[i].fansAccountId+'</td>';
	        		str += '	<td class="text-center">'+list[i].fansNickname+'</td>';
	        		str += '	<td class="text-center"><img src="'+list[i].fansImage+'" width="30px"></td>';
	        		str += '	<td class="text-center">'+list[i].level+'</td>';
	        		str += '	<td class="text-center">'+list[i].createTime+'</td>';
	        		str += '</tr>';
	        	}
	        	$("#userList").append(str);
	        	
	        	$("#pagination").empty();
	        	var pageString = "";
	        	var currentPage = page;
	        	var sumPage = Math.ceil(count/pageSize);
	        	pageString += '<li><a href="javascript:void(0);" onclick=searchCase(1,'+(currentPage-1)+') aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>';
	        	for(var i=1;i<=sumPage;i++){
	        		if(currentPage == i){
        				pageString += '<li><a href="javascript:void(0);" onclick=searchCase(1,'+i+') class="active">'+i+'</a></li>';
        			}else{
        				pageString += '<li><a href="javascript:void(0);" onclick=searchCase(1,'+i+')>'+i+'</a></li>';
        			}
	        	}
	        	if(sumPage==currentPage){
	        		pageString += '<li><a href="javascript:void(0);" onclick=searchCase(1,'+(currentPage)+') aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>';
	        	}else{
	        		pageString += '<li><a href="javascript:void(0);" onclick=searchCase(1,'+(currentPage+1)+') aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>';
	        	}
	        	
	        	$("#pagination").append(pageString);
	        }
	    })
	}
	
    function delUser(r) {
        $("table").index($(r).parent().parent());
        $(r).parent().parent().remove();
    }
//            $('#datetimepicker6').datetimepicker({
//                format: 'YYYY-MM-DD HH:mm:ss',
////                format: 'YYYY-MM-DD',
//                locale: 'zh-CN',
//                defaultDate: false,
//                sideBySide: false
//            });
//            $('#datetimepicker7').datetimepicker({
//                format: 'YYYY-MM-DD HH:mm:ss',
//                locale: 'zh-CN',
//                defaultDate: false,
//                sideBySide: false
//            });
//            $('#datetimepicker6').datetimepicker();
//            $('#datetimepicker7').datetimepicker({
//                useCurrent: false //Important! See issue #1075
//            });
//            $("#datetimepicker6").on("dp.change", function (e) {
//                $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
//            });
//            $("#datetimepicker7").on("dp.change", function (e) {
//                $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
//            });
</script>
</body>
</html>
